<div class="f-header">
	<div class="f-header-box clearfix">
		<div class="container">
			<div id="logo" class="logo">
				<a href="/" target="_self" title="青之巅">
					<img title="青之巅" src="${s.base}/res/i/logo1.png">
				</a>
			</div>
			<nav class="header-nav">
				<a href="/" class="header-nav-item">首 页</a>
				<a href="${s.base}/course/list.html" class="header-nav-item">课 程</a>
				<a href="${s.base}/user/mycourse.html" class="header-nav-item">我的</a>
			</nav>

			<div class="search-wrap">
				<div class="search-area" data-search="top-banner">
					<input class="search-input" data-suggest-trigger="suggest-trigger" type="text" autocomplete="off">
					<input type="hidden" class="btn_search" data-search-btn="search-btn">
					<ul class="search-area-result" data-suggest-result="suggest-result" style="display: none;"></ul>
				</div>
				<div class="search-btn">
					<i class="fa fa-search"></i>
				</div>
			</div>
			<@shiro.guest>
			<div class="login-area pull-right">
				<ul class="login clearfix">

					<li>
						<a href="${s.base}/auth/register.html">注册</a>
					</li>
					<li class="line">|</li>
					<li>
						<a id="login" href="#">登录</a>
					</li>
				</ul>
			</div>
		</@shiro.guest>
		<@shiro.user>
			<div id="user-area" class="pull-right">
				<ul>
					<li id="header-user-card">
						<a href="${s.base}/user/mycourse.html" class="header-nav-item"  style="padding:0px;width:60px;height:72px;line-height: 72px" id="userdetail">
							<img id="headerUserHeader" class="user-header" alt="" src='<@shiro.principal property="header"/>'>
						</a>
						<div class="g-user-card">
							<div class="card-inner">
								<div class="card-top clearfix">
									<a href="/u/4790378" class="l">
										<img src='<@shiro.principal property="header"/>' alt="qq_Jnone_0">
									</a>
									<div class="card-top-right-box l">
										<a href="/u/4790378"><span class="name text-ellipsis">
                                            <@shiro.principal property="username" />
                                        </span></a>
										<div class="meta">
											<a href="/u/4790378/experience">经验<b id="js-user-mp">30</b></a>
											<a href="/u/4790378/credit">积分<b id="js-user-credit">0</b></a>
										</div>
									</div>
								</div>
								<div class="user-center-box">
									<ul class="clearfix">
										<li class="l">
											<a href="/u/4790378/courses" target="_blank"><span class="user-center-icon icon-tick"></span>我的课程</a>
										</li>
										<li class="l">
											<a href="//order.imooc.com/myorder" target="_blank"><span class="user-center-icon icon-receipt"></span>订单中心</a>
										</li>
										<li class="l">
											<a href="/mall/index" target="_blank"><span class="user-center-icon icon-score_shop"></span>积分商城</a>
										</li>
										<li class="l">
											<a href="/user/setbindsns" target="_blank"><span class="user-center-icon icon-set"></span>个人设置</a>
										</li>
									</ul>
								</div>
								<div class="card-sets clearfix">
									<a href="/auth/logout.html" class="l">安全退出</a>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</@shiro.user>
		</div>
		<@shiro.user>
		<!-- 登录之后显示用户的基本信息-start -->
		<div id="userdetailHtml" style="display: none;">
			<div style="padding:10px;">
				<div style="margin-top:10px;">
					<span style="font-size: 16px;">用户名：<@shiro.principal property="username"/></span>
				</div>

				<div style="margin-top:20px;">
					<a id="curCourseA" class="link-a" target="_blank" href="">
					<div id="curCourseSpan" class="ellipsis" style="font-size: 16px;width:220px;height:30px;overflow:hidden;font-weight:bold;" title="" ></div>
					</a>
				</div>
				<div style="margin-top:5px;" >
					<a id="curCourseSectionA"  class="link-a" target="_blank" href="">
					<div id="curCourseSectionSpan" class="ellipsis"  style="font-size: 14px;width:220px;height:30px;overflow:hidden;" title=""></div>
					</a>
				</div>

				<div style="margin-top:20px;border-top:1px solid #eee;width:200px;padding-top:10px;">
					<a class="link-a" href="${s.base}/auth/logout.html">
					<span>退出</span>
					</a>
				</div>
			</div>
		</div>
		<!-- 登录之后显示用户的基本信息-end -->
		</@shiro.user>
	</div>
</div>

<@shiro.guest>
<!-- 用户登录注册modal -->

<div id="loginModal" class="login-modal">
	<div class="login-block">
		<div class="login-content">
			<div class="login-type-uw">
				<form id="loginForm" method="POST" action="${s.base}/auth/ajaxlogin.html">
					<div class="tit">登录</div>
					<div class="form-box">
						<div class="form-item clearfix">
							<div class="form-inp-area">

								<input id="usernameHeader1" class="form-input" name="username" value="" cusrule="mail_phone" placeholder="用户名" autocomplete="off" type="text">
								<span class="form-tips">包含非法字符</span>
							</div>
						</div>
						<div class="form-item clearfix">
							<div class="form-inp-area">
								<input id="passwordHeader1" class="form-input" name="password" value="" placeholder="密码" autocomplete="off" type="password">
								<span class="form-tips">包含数字、字母、下划线的6-18位</span>
								<span id="loginError" style="margin-left:10px;height:33px;line-height:33px;color:red;display:none;">错误信息</span>
							</div>
						</div>
						<div class="form-item clearfix">
							<button id="js_submit_login" class="form-btn form-btn-blue width-100" type="button">登录</button>
						</div>
						<div class="form-item clearfix">
							<div class="pull-right color-aaa" style="padding-top: 2px;">
								<a href="http://uc.tmooc.cn/login/jumpToUserFindPassword" class="color-aaa disp-inline">忘记密码</a>&nbsp;|&nbsp;<a href="${s.base}/auth/register.html" class="color-aaa disp-inline">注册</a>
							</div>
						</div>

						<div class="other-loginbox">
							<p class="c-tit color-aaa text-center">第三方账号登录</p>
							<div class="c-btns">
								<div class="c-fbtn">
									<a class="c-btn js-log-type-cut"><i class="cusfont cusfont-wechat"></i></a>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
			<div class="login-type-wx"></div>
			<span class="login-close"></span>
		</div>
	</div>
</div>

<!--
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"  style="position:fixed; top:30%;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" style="font-size:18px;">×</span>
                </button>
                <h4 class="modal-title"  id="loginTitle"  style="float: left; color: #337Ab7;cursor: pointer; " onclick="login();">登 录</h4>
                <h4 class="modal-title"  id="registeTitle"  style="float: left;margin-left: 20px;cursor: pointer;" onclick="registe();">注 册</h4>
                <div class="clearfix"></div>
            </div>

            <div class="modal-body">
               	<form id="loginForm" class="form-horizontal" style="padding: 0px 20px;" method="POST" action="${s.base}/auth/ajaxlogin.html">
                      <div class="form-group">
                          <input id="usernameHeader1"  type="text" class="form-control"  name="username" placeholder="用户名">
                      </div>
                      <div class="form-group help">
                          <input id="passwordHeader1"  type="password" class="form-control"  name="password"  placeholder="密　码">
                      </div>
                      <div class="form-group">
						<input id="identiryCodeHeader1" class="form-control"  name="identiryCode" maxlength="6" class="input-text" type="text" style="width: 120px;float:left;" placeholder="请输入验证码"/>
						<img  id="indeityImgHead1"  onclick="reloadIndityImg('indeityImgHead1');" src="${s.base}/tools/identiry/code.html" style="width:80px;height:33px;float:left;margin-left:10px;float:left;border-radius:5px;"/>
					  	<span id="loginError" style="margin-left:10px;height:33px;line-height:33px;color:red;display:none;">错误信息</span>
					  </div>
                      <div class="form-group">
                          <label>
                           <input type="checkbox" value="1" id="checkbox1" name="rememberMe">
                           <span class="text" style="color: #787D82;font-size: 14px;">下次自动登录</span>
                          </label>
                      </div>
                      <a href="javascript:void(0)">
                      	<div onclick="doAjaxLogin();" class="header-login-btn">登 录</div>
                      </a>
                  </form>

                   <form id="registeForm" method="POST" action="${s.base}/auth/doRegister.html"  class="form-horizontal" style="padding: 0px 20px;display: none;">
                       <div class="form-group">
                           <input id="usernameHeader2"  name="username" type="text" class="form-control"   placeholder="用户名">
                       </div>
                       <div class="form-group help">
                           <input id="passwordHeader2"  name="password"  type="password" class="form-control"  placeholder="密　码">
                       </div>
                       <div class="form-group">
							<input id="identiryCodeHeader2" class="form-control"  name="identiryCode" maxlength="6" class="input-text" type="text" style="width: 120px;float:left;" placeholder="请输入验证码"/>
							<img  onclick="reloadIndityImg('indeityImgHead2');" id="indeityImgHead2"  src="${s.base}/tools/identiry/code.html" style="width:80px;height:33px;float:left;margin-left:10px;float:left;border-radius:5px;"/>
					  		<span id="registerError" style="margin-left:10px;height:33px;line-height:33px;color:red;display:none;">错误信息</span>
					  </div>
                       <a href="javascript:void(0)">
                      	<div class="header-login-btn" onclick="doAjaxRegister()">注 册</div>
                       </a>
                   </form>
            </div>
        </div>
    </div>
</div>
-->
</@shiro.guest>

<script type="text/javascript">
	$(function(){
		var headPhoto = $('#headerUserHeader').attr('src');
		if(headPhoto == null || headPhoto == '' || headPhoto == 'null'){
			var headPhoto = "${s.base}/res/i/header.jpg";
			$('#headerUserHeader').attr('src',headPhoto);
		}

		if(SHIRO_LOGIN){
			//获取当前用户学习进度
			$.ajax({
				url:CONTEXT_PATH + '/course/getCurLeanInfo.html',
			    type:'POST',
			    dataType:'json',
			    success:function(resp){
			    	if(resp.errcode == 0 && resp.data){
		    			var learnUrl = CONTEXT_PATH+"/course/learn/"+resp.data.curCourse.id+".html";
			    		var learnTitle = resp.data.curCourse.name;
			    		$('#curCourseA').attr('href',learnUrl)
			    		$('#curCourseSpan').attr('title',learnTitle).html(learnTitle);
			    		
			    		var videoUrl = CONTEXT_PATH+"/course/video/"+resp.data.curCourseSection.id+".html";
			    		var videoTitle = resp.data.curCourseSection.name;
			    		$('#curCourseSectionA').attr('href',videoUrl)
			    		$('#curCourseSectionSpan').attr('title',videoTitle).html(videoTitle);
			    	}
			    } 
			});
			var w = 0;
            $("#header-user-card").on("mouseenter",function() {
				clearTimeout(w),
				$(this).hasClass("hover") || $(this).addClass("hover")
			}).on("mouseleave",function(e) {
				e.stopPropagation();
				var a = $(this);
				w = setTimeout(function() {
						a.hasClass("hover") && a.removeClass("hover")
					},300)
			});
            $('#userdetail,#nav_list').on("mouseenter",
                function() {
                    $('#userdetail').addClass("hover"),
                        $("#nav_list").show()
                });
			$('#userdetail,#nav_list').on("mouseleave",
				function() {
					$('#userdetail').removeClass("hover"),
						$("#nav_list").hide()
				});
		}

        //搜索
        $(".search-input").on("focus",function () {
            $(".search-wrap").addClass("search-focus");
        }).on("blur",function () {
            $(".search-wrap").removeClass("search-focus");
        });
	});
	
	<@shiro.guest>

    /*登录弹框-xxw*/
    $('#login').click(function() {
        if(window.IS_UC_PAGE_) { //用户中心页面登录
            //location.href = UC_PATH_ + '/login/jumpTologin';
        } else {
            toLoginWinFn();
        }
        return false;
    });
    /* 登陆弹窗方法 */
    function toLoginWinFn() {
        $.colorbox({
            speed: 0,
            inline: true,
            overlayClose: false,
            close: false,
            href: "#loginModal",
			opacity:0.85,
            onOpen: function() {
                $("#loginModal").css("display","block");
                /*$('#js_login_form').find('.error').removeClass('error');
                $('.js-md-180417-login-cj').find('.js-log-type:first').show()
                    .siblings('.js-log-type').hide();
                $('#js_account_pm, #js_password, #js_imgcode').val('');
                $('#js_submit_login').data('isclick', false).html('登录');*/
            }
        });
        // refreshValidateImg(); //刷新验证码
    }
    $('.login-close').click(function () {
        $("#loginModal").css("display","none");
        $.colorbox && $.colorbox.close();
    });
    //登录注册实现
	/*function login(){
		$('#loginTitle').css('color','#337Ab7');
		$('#loginForm').show();
		$('#registeTitle').css('color','#000');
		$('#registeForm').hide();
	}
	function registe(){
		$('#loginTitle').css('color','#000');
		$('#loginForm').hide();
		$('#registeTitle').css('color','#337Ab7');
		$('#registeForm').show();
	}*/
	
	function reloadIndityImg(eleId){
		document.getElementById(eleId).src = CONTEXT_PATH + "/tools/identiry/code.html?ticket=" + Math.random();
	}
	$("#js_submit_login").click(function () {
		doAjaxLogin();
    });
	function doAjaxLogin(){
		var username = $('#usernameHeader1').val();
		var password = $('#passwordHeader1').val();
		
		//验证用户名 
		if(!oc.enNumValid(username)){
			$('#loginError').show();
			$('#loginError').html("用户名只能为英文或数字");
			return;
		}
		
		//验证密码
		if(oc.isEmpty(password) || password.length < 6){
			$('#loginError').show();
			$('#loginError').html("密码至少6位");
			return;
		}
		//验证码不能为空
		/*var code = $('#identiryCodeHeader1').val();
		if(oc.isEmpty(code)){
			$('#loginError').show();
			$('#loginError').html("请输入验证码");
			return;
		}*/
		
		//登录
		$('#loginForm').ajaxSubmit({
			datatype : 'json',
			success : function(respText) {
				var resp = $.parseJSON(respText);
				if (resp.errcode == 0) {
					window.location.reload();
				} else if(resp.errcode == 1) {
					$('#loginError').show();
					$('#loginError').html("用户名或密码错误");
				}else if(resp.errcode == 2){
					$('#loginError').show();
					$('#loginError').html("验证码输入错误！");
					reloadIndityImg('indeityImgHead1');
				}
			},
			error : function(xhr) {
			}
		});
	}
	
	//ajax注册
	function doAjaxRegister(){
		var username = $('#usernameHeader2').val();
		var password = $('#passwordHeader2').val();
		
		//验证用户名 
		if(!oc.enNumValid(username)){
			$('#registerError').show();
			$('#registerError').html("用户名只能为英文或数字");
			return;
		}
		
		//验证密码
		if(oc.isEmpty(password) || password.length < 6){
			$('#registerError').show();
			$('#registerError').html("密码至少6位");
			return;
		}
		
		//验证码不能为空
		var code = $('#identiryCodeHeader2').val();
		if(oc.isEmpty(code)){
			$('#registerError').show();
			$('#registerError').html("请输入验证码");
			return;
		}
		
		//注册
		$('#registeForm').ajaxSubmit({
			datatype : 'json',
			success : function(respText) {
				var resp = $.parseJSON(respText);
				if (resp.errcode == 0) {
					window.location.href="${s.base}/auth/login.html";
				} else if(resp.errcode == 1) {
					$('#registerError').show();
					$('#registerError').html("用户名已被注册，请更换！");
				}else if(resp.errcode == 2){
					alert(1);
					$('#registerError').show();
					$('#registerError').html("验证码输入错误！");
					reloadIndityImg('indeityImgHeader2');
				}
			},
			error : function(xhr) {
			}
		});
	}
	</@shiro.guest>
</script>




